<template>
  <div class="progress-list">
    <div
      v-for="(item, index) in dataList"
      :key="item.time"
      class="progress-list-item"
    >
      <div
        class="progress-list-time"
        :class="{ active: expandedIndices.includes(index) }"
      >
        <div @click="toggle(index)">
          <i
            :class="[
              'el-icon',
              expandedIndices.includes(index)
                ? 'el-icon-arrow-down'
                : 'el-icon-arrow-right'
            ]"
            :style="{
              color: expandedIndices.includes(index)
                ? '#1890ff'
                : '#606266'
            }"
          ></i>
          <span class="time-text">{{
            item.createTime
          }}</span>
        </div>

        <div>
          <span
            class="edit"
            @click="editProcess(item, index)"
            v-if="isProgressEdit"
          >
            编辑
          </span>
          <span
            class="delete"
            @click="deleteProcess(index)"
            v-if="isProgressEdit"
          >
            删除
          </span>
        </div>
      </div>

      <div
        v-if="expandedIndices.includes(index)"
        class="progress-list-detail"
      >
        <!-- <div>
          <span>当前节点：</span>{{ item.sectionId }}
        </div> -->
        <div>
          <span>当前进展：</span>{{ item.stageRemark }}
        </div>
        <div>
          <span>是否存在问题：</span>{{ item.hasProblem }}
        </div>
        <div>
          <span>问题描述：</span
          >{{ item.problemDescription }}
        </div>
        <div class="image">
          <span>进度图片：</span>
          <span style="color: #999; font-size: 12px"
            >(共{{ item.showImages.length }}张)</span
          >
          <div
            class="image-grid"
            v-if="item.showImages.length"
          >
            <el-image
              v-for="(img, index) in item.showImages"
              :key="index"
              :src="item.previewList[index]"
              :preview-src-list="item.previewList"
              fit="cover"
            />
          </div>
          <div
            v-if="!item.showImages.length"
            style="
              color: #999;
              font-size: 12px;
              margin-top: 5px;
            "
          >
            暂无图片
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { STATIC_FILE_URL } from '@/api/config.js'

export default {
  props: {
    progressList: Array,
    isProgressEdit: Boolean
  },
  data() {
    return {
      expandedIndices: [0],
      dataList: []
    }
  },
  computed: {
    STATIC_FILE_URL() {
      return STATIC_FILE_URL
    }
  },
  watch: {
    progressList: {
      handler(val, oldVal) {
        // 检查是否有实际变化
        if (val && val.length > 0) {
          val.forEach((item, index) => {})
        }

        this.updateDataList(val)
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    updateDataList(val) {
      this.dataList = val.map((item, itemIndex) => {
        const previewList = []
        const showImages = []

        // 处理已上传图片 - progressPictureIds
        if (Array.isArray(item.progressPictureIds)) {
          item.progressPictureIds.forEach((img) => {
            if (img.filePath) {
              previewList.push(
                `${STATIC_FILE_URL}${img.filePath}`
              )
              showImages.push({ ...img, isUploaded: true })
            }
          })
        }

        // 处理新上传的本地 File 对象 - imageArr
        if (Array.isArray(item.imageArr)) {
          item.imageArr.forEach((file) => {
            if (file instanceof File) {
              const objectUrl = URL.createObjectURL(file)
              previewList.push(objectUrl)
              showImages.push({
                file,
                isUploaded: false,
                url: objectUrl
              })
            } else if (file && file.url) {
              // 处理可能已经转换过的文件对象
              previewList.push(file.url)
              showImages.push({
                ...file,
                isUploaded: false
              })
            }
          })
        }

        return {
          ...item,
          previewList,
          showImages
        }
      })

      // 强制触发视图更新
      this.$forceUpdate()
    },
    toggle(index) {
      const i = this.expandedIndices.indexOf(index)
      if (i > -1) {
        this.expandedIndices.splice(i, 1)
      } else {
        this.expandedIndices.push(index)
      }
    },
    deleteProcess(index) {
      this.$confirm('确认删除该条标段信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$emit('delete', index)
      })
    },
    editProcess(item, index) {
      this.$emit('edit', item, index)
    }
  }
}
</script>

<style lang="scss" scoped>
.progress-list {
  padding: 0 10px;
  color: #606266;
  overflow-x: auto;

  .progress-list-item {
    margin-bottom: 10px;
    border-top: 1px solid #e0e2e5;
  }

  &-time {
    padding: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;

    i {
      margin-right: 6px;
      font-size: 16px;
      transition: color 0.3s;
    }

    .time-text {
      transition: color 0.3s;
    }

    &.active .time-text {
      color: #1890ff;
    }

    .edit {
      color: #1890ff;
    }

    .delete {
      color: red;
    }
  }

  span {
    color: #1f1f1f;
  }

  .progress-list-detail {
    padding-left: 22px;
    div {
      margin-top: 5px;
    }

    .image-grid {
      display: grid;
      grid-template-columns: repeat(3, 100px);
      gap: 8px;
      margin-top: 8px;
    }

    .image-grid .el-image {
      width: 100px;
      height: 100px;
      object-fit: cover;
    }
  }
}
</style>
